<template>
  <div class="paybox">
    <div class="back1" @click="toshoper">
      <i class="el-icon-close"></i>支付
    </div>
    <div class="info">
      <p class="reach">订单配送至</p>
      <div class="address">
        <p>广东石油化工学院</p>
        <i class="el-icon-arrow-right"></i>
      </div>
      <div class="person">
        <span>宾小吧（先生）</span>
        <span>15766093032</span>
      </div>
    </div>
    <div class="type">
      <div class="type_1">
        <div class="span1">
          <span>送达时间</span>
        </div>
        <div class="span2">
          <span>尽快送达</span>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="type_1">
        <div class="span1">
          <span>支付方式</span>
        </div>
        <div class="span2">
          <span>支付宝</span>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </div>
    <!--商家-->
    <div class="goodslist">
      <div class="shopname">
        <div class="name-left">{{name}}<i class="el-icon-arrow-right"></i></div>
      </div>
      <div class="detaillist">
        <ul>
          <li v-for="item of foods">
            <div class="detail-left">
              <img :src="item.image">
              {{item.name}}
            </div>
            <div class="detail-right">
              <span style="font-size: 10px;font-weight: bold;float: left">x{{item.count}}</span>
              <span style="font-size: 12px;color: #cccccc;display:inline-block;text-decoration: line-through;text-align: center" v-show="item.oldPrice !=''">￥{{item.oldPrice}}</span>
              <span style="font-size: 16px;font-weight: bold;float:right;margin-right: 5px">￥{{item.price}}</span>
            </div>
          </li>
          <li>
            <div class="detail-left">
              <img src="">
              配送费
            </div>
            <div class="detail-right">
              <span style="font-size: 10px;font-weight: bold;float: left">x1</span>
              <span style="font-size: 12px;color: #cccccc;text-decoration: line-through;text-align: center"></span>
              <span style="font-size: 16px;font-weight: bold;float:right;margin-right: 5px">￥4</span>
            </div>
          </li>
          <li>
            <div class="detail-left">
              <img src="">
              餐盒费
            </div>
            <div class="detail-right">
              <span style="font-size: 10px;font-weight: bold;float: left">x1</span>
              <span style="font-size: 12px;color: #cccccc;text-decoration: line-through;text-align: center"></span>
              <span style="font-size: 16px;font-weight: bold;float:right;margin-right: 5px">￥2</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="pay">
        <!--<div class="pay-left">-->
          <!--<i class="el-icon-phone-outline"></i>联系商家-->
        <!--</div>-->
        <div class="pay-right">
          应付  ￥<span>{{totalPrice}}</span>
        </div>
      </div>
    </div>
    <!--支付-->
    <div class="footer">
      <div class="footer-left">
        总价<span class="spa1">￥{{totalPrice}}</span><span class="spa2">{{lastmoney}}</span>
      </div>
      <div class="footer-right" @click="topaysuccess">
        支付
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        foods: this.$route.params.food,
        name: this.$route.params.name,
        totalPrice: this.$route.params.total + 6
      }
    },
    watch: {
      totalPrice () {
        this.tatalPrice = this.$route.params.total + 6
      }
    },
    methods: {
      toshoper () {
        this.$router.push('/shoper')
      },
      topaysuccess () {
        window.alert(`需要支付${this.totalPrice}元`)
        this.$router.push({name: 'paysuccess', params: {foods: this.foods, name: this.name, total: this.totalPrice}})
      }
    },
    mounted () {
      console.log(this.$route.params)
    }
  }
</script>
<style lang="stylus" type="text/stylus">
  @import '../../common/stylus/mixin.styl';
  .paybox
    width :100%
    overflow :hidden
    .back1
      width :100%
      height :40px
      position :fixed
      background-color :blue
      line-height :50px
      color :white
      padding-left :10px
      font-size :18px
      i
        margin-right :20px
        font-size :18px
    .info
      width :100%
      height :250px
      background:linear-gradient(top, blue,rgba(0,0,0,0))
      color: white
      margin-top :40px
      .reach
        margin-left :12px
        padding-top :10px
        font-size :12px
        color: rgba(255,255,255,.8)
      .address
        margin :10px 5px 10px 10px
        font-size :18px
        p
          margin-right :5px
          font-weight :bold
          display :inline-block
      .person
        font-size :14px
        margin-left :10px
        span
          margin-right :10px
    .type
      width :95%
      padding :10px 0
      background-color :white
      margin-top :-140px
      margin-left :2.5%
      line-height :30px
      .type_1
        height :30px
        padding :4px
        border-bottom :rgba(7,17,27,.1)
        font-weight :bold
        .span1
          float :left
        .span2
          float :right
          span
            color: blue
    .footer
      width :100%
      height :50px
      line-height :60px
      position :fixed
      bottom :0
      left :0
      border-top :1px solid rgba(7,17,27,.1)
      background-color :white
      .footer-left
        float :left
        margin-left :20px
        .spa1
          color :red
        .spa2
          color :#cccccc
          font-size :10px
          text-decoration :line-through
          margin-left :5px
      .footer-right
        float :right
        width :30%
        background-color :green
        color :white
        text-align :center
        font-weight :bold
  .goodslist {
    width: 95%;
    margin-top: 10px;
    box-shadow: 1px 1px 2px #cccccc;
    margin-left: 2.5%;
    padding-bottom: 25px;
    background-color: white
    margin-bottom :50px
  }
  .shopname {
    padding: 15px 0;
    border-bottom: 1px solid rgba(7,17,27,.1);
  }
  .shopname .name-left{
    display: inline-block;
    font-weight:bold;
  }
  .name-left i {
    color: #cccccc;
    margin-left: 5px;
  }
  .shopname>span {
    float: right;
    text-align: center;
    background-color: green;
    color: white;
    font-size: 14px;
    border-radius: 5px;
    padding: 4px 8px;
    margin-right: 5px;
  }
  .detaillist {
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(7,17,27,.1);
  }
  .detaillist ul li {
    list-style: none;
    padding: 10px 0;
  }
  .detail-left {
    display: inline-block;
    width: 50%;
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
  }
  .detail-left>img {
    width: 40px;
    height: 40px;
    vertical-align: middle;
  }
  .detail-right {
    display: inline-block;
    width: 48%;
    text-align: center;
  }
  .goodslist .pay {
    width: 100%;
    padding: 10px 0;
    line-height: 30px;
  }
  .pay .pay-left {
    float: left;
    color: blue;
    font-size: 14px;
  }
  .pay-left i {
    margin-right: 5px;
  }
  .pay-right {
    float: right;
    font-size: 16px;
    font-weight: bold;
    margin-right: 5px;
  }
  .pay-right>span {
    color: red;
    font-size: 18px;
  }
</style>
